.mask-both {
  mask-image: linear-gradient(
    rgba(255, 255, 255, 0) 0%,
    rgb(255, 255, 255) 20px,
    rgb(255, 255, 255) calc(100% - 20px),
    rgba(255, 255, 255, 0) 100%
  );
}
.mask-both-lg {
  mask-image: linear-gradient(
    rgba(255, 255, 255, 0) 0%,
    rgb(255, 255, 255) 50px,
    rgb(255, 255, 255) calc(100% - 50px),
    rgba(255, 255, 255, 0) 100%
  );
}

.mask-b {
  mask-image: linear-gradient(rgb(255, 255, 255) calc(100% - 20px), rgba(255, 255, 255, 0) 100%);
}

.mask-b-lg {
  mask-image: linear-gradient(rgb(255, 255, 255) calc(100% - 50px), rgba(255, 255, 255, 0) 100%);
}

.mask-t {
  mask-image: linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 20px);
}

.mask-t-lg {
  mask-image: linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 50px);
}

.mask-horizontal {
  mask-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 1) 14%,
    rgba(255, 255, 255, 1) 86%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* Sonner customize */

@media (max-width: 600px) {
  #root [data-sonner-toaster][data-y-position="bottom"] {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 20px);
  }

  #root [data-sonner-toaster][data-y-position="top"] {
    top: calc(env(safe-area-inset-top, 0px) + 20px);
  }

  #root [data-sonner-toast] {
    --border-radius: 16px;
  }

  #root [data-button="true"][data-action="true"] {
    @apply relative -mr-[16px] bg-transparent px-4 font-sans font-bold text-foreground before:absolute before:inset-y-0 before:left-0 before:w-px before:bg-foreground/30;
  }
}

#root [data-sonner-toast] {
  &[data-type="success"]::before,
  &[data-type="error"]::before,
  &[data-type="info"]::before,
  &[data-type="warning"]::before {
    content: "";
    border-radius: var(--border-radius);

    @apply pointer-events-none absolute inset-0 z-[-1] !transform-none opacity-10 dark:opacity-20;
  }

  &[data-type="success"]::before {
    background: linear-gradient(to left, #56b4d3, #348f50);
  }

  &[data-type="error"]::before {
    background: linear-gradient(to right, #ee9ca7, #ffdde1);
  }

  &[data-type="info"]::before {
    background: linear-gradient(to right, #64a7d5, #6dd5fa, #c5eef4);
  }

  &[data-type="warning"]::before {
    background: linear-gradient(to right, #f2994a, #f2c94c);
  }
}
